{% extends "base.html" %}

{% block h1 %}Criar Personagem{% endblock %}

{% block content %}
<fieldset>
{% if not maxPersonagem %}
	<form method="post" name="formCriarPersonagem" id="formCriarPersonagem">
		{% csrf_token %}
		{{ form.as_p }}
		<input type="hidden" name="url_avatar" id="url_avatar" value="" />
		<label>
			<input type="submit" class="button" value="Criar" />
		</label>
		<!-- attrs -->
		<input type="hidden" name="id_hp_raca" id="id_hp_raca" value="0" />
		<input type="hidden" name="id_hp_classe" id="id_hp_classe" value="0" />
		<input type="hidden" name="id_mp_raca" id="id_mp_raca" value="0" />
		<input type="hidden" name="id_mp_classe" id="id_mp_classe" value="0" />
		<input type="hidden" name="id_forca_raca" id="id_forca_raca" value="0" />
		<input type="hidden" name="id_forca_classe" id="id_forca_classe" value="0" />
		<input type="hidden" name="id_inteligencia_raca" id="id_inteligencia_raca" value="0" />
		<input type="hidden" name="id_inteligencia_classe" id="id_inteligencia_classe" value="0" />
		<input type="hidden" name="id_constituicao_raca" id="id_constituicao_raca" value="0" />
		<input type="hidden" name="id_constituicao_classe" id="id_constituicao_classe" value="0" />
		<input type="hidden" name="id_agilidade_raca" id="id_agilidade_raca" value="0" />
		<input type="hidden" name="id_agilidade_classe" id="id_agilidade_classe" value="0" />
		<input type="hidden" name="id_tipo" id="id_tipo" value="" />
	</form>
	<div id="avatar-body">
		<div id="avatar">
			<img src="{{ MEDIA_URL }}img/avatar/user.png" width="170" height="185" />
		</div>
		<div id="change-avatar">
			<ul>
				<li>
					<a href="#"><img src="{{ MEDIA_URL }}img/avatar/user.png" width="40" height="40" class="select" /></a>
				</li>
				<li>
					<a href="#"><img src="{{ MEDIA_URL }}img/avatar/user2.png" width="40" height="40" class="select" /></a>
				</li>
				<li>
					<a href="#"><img src="{{ MEDIA_URL }}img/avatar/user3.png" width="40" height="40" class="select" /></a>
				</li>
				<li>
					<a href="#"><img src="{{ MEDIA_URL }}img/avatar/user.png" width="40" height="40" class="select" /></a>
				</li>
			</ul>
		</div>
	</div>
	<div id="attr">
		<table width="85%">
			<tr>
				<td><label>HP:</label></td>
				<td><label id="hp" for="hp"> </label></td>
			</tr>
			<tr>
				<td><label>MP:</label></td>
				<td><label id="mp" for="mp"> </label></td>
			</tr>
			<tr>
				<td><label>Força:</label></td>
				<td><label id="forca" for="forca"> </label></td>
			</tr>
			<tr>
				<td><label>Agilidade:</label></td>
				<td><label id="agilidade" for="agilidade"> </label></td>
			</tr>
			<tr>
				<td><label>Constituição:</label></td>
				<td><label id="constituicao" for="constituicao"> </label></td>
			</tr>
			<tr>
				<td><label>Inteligência:</label></td>
				<td><label id="inteligencia" for="inteligencia"> </label></td>
			</tr>
		</table>
	</div>
</fieldset>
{% else %}
	<center>{{ maxPersonagem }}</center>
{% endif %}
{% endblock %}

{% block script %}
<script type="text/javascript">
	$(function() {
		$('#url_avatar').attr('value', $('#avatar img:first').attr('src'));
		$('#change-avatar img:first').removeClass("select");
		$('#attr').hide();
		$('#id_nome').keyup(function() {
			$('#id_nome').css('text-transform', 'capitalize');
		});

		$('#change-avatar img').click(function(e) {
			e.preventDefault();
			$('#change-avatar img:not(.select)').addClass("select");
			$(this).removeClass("select");
			$('#avatar img').attr('src', $(this).attr('src'));
			$('#url_avatar').attr('value', $('#avatar img').attr('src'));
		});
		
		$('#id_nome').change(function(){
			if($('#id_hp_raca').val() == '0' && $('#id_classe').val() != '' && $('#id_raca').val() != '' ){
				$('#id_raca').trigger('change');
				$('#id_classe').trigger('change');
			}
		});

		$('#id_raca').change(function() {
			$('#id_tipo').attr('value', 'raca');
			$.ajax({
				type : "post",
				url : "/personagem/busca/",
				dataType : "json",
				data : $('#formCriarPersonagem').serialize(),
				success : function(retorno) {
					manipularRetorno(retorno, 'raca');
				}
			});
		});

		$('#id_classe').change(function() {
			$('#id_tipo').attr('value', 'classe');
			$.ajax({
				type : "post",
				url : "/personagem/busca/",
				dataType : "json",
				data : $('#formCriarPersonagem').serialize(),
				success : function(retorno) {
					manipularRetorno(retorno, 'classe');
				}
			});
		});
		function manipularRetorno(retorno, campo) {
			for(attr in retorno[0].fields) {
				if(attr != 'nome' && attr != 'tamanho' && attr != 'habilidades' && attr != 'descricao') {
					valor = retorno[0].fields[attr];
					atribuir(attr, campo, valor);
				}
			}
			mostrar();
		}

		function atribuir(campo, tipo, valor) {
			$('#id_' + campo + '_' + tipo).attr('value', valor);
		}

		function recuperar(campo) {
			v1 = parseInt($('#id_' + campo + '_raca').val());
			v2 = parseInt($('#id_' + campo + '_classe').val());
			return soma = v1 + v2;
		}

		function mostrar() {
			$('#hp').html(recuperar('hp'));
			$('#mp').text(recuperar('mp'));
			$('#inteligencia').text(recuperar('inteligencia'));
			$('#forca').text(recuperar('forca'));
			$('#constituicao').text(recuperar('constituicao'));
			$('#agilidade').text(recuperar('agilidade'));
			$('#attr').show();
		}

	});

</script>
{% endblock %}